<template>
	<el-button type="primary" style="margin-bottom: 20px;" @click="showAddReportDialog = true">添加报告</el-button>
    <div v-if="reportList.length > 0">
        <div class="report-container">
            <div v-for="report in reportList" :key="report.id" class="report-block">
                <el-image 
                    :src="report.picUrl" 
                    :preview-src-list="[report.picUrl]" 
                    style="width: 100px; height: 100px;" 
                />
                <p v-if="report.remark">{{ report.remark }}</p>
                <p v-else>暂无备注</p>
                <el-button type="danger" size="small" @click="deleteReport(report.id)">删除</el-button>
            </div>
        </div>
    </div>
    <p v-else>暂无报告数据</p>
    
    <!-- 添加报告弹窗 -->
    <el-dialog v-model="showAddReportDialog" title="添加报告">
        <el-form :model="reportForm" label-width="100px">
            <el-form-item label="上传图片">
                <cl-upload v-model="reportForm.picUrl" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="reportForm.remark" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="showAddReportDialog = false">取消</el-button>
            <el-button type="primary" @click="submitReport">确定</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { useCool } from '/@/cool';
import { ElMessage, ElMessageBox } from 'element-plus';

const { service } = useCool();

const props = defineProps({
    showReportDialog: {
        type: Boolean,
        default: false
    },
    studentId: {
        type: [Number, String],
        default: 0
    }
});
// 控制添加报告弹窗的显示与隐藏
const showAddReportDialog = ref(false);
const showReportDialog = props.showReportDialog;

// 报告表单数据
const reportForm = reactive({
    picUrl: '',
    remark: '',
    studentId: props.studentId
});

const reportList = ref([]);
// 获取报告列表
const getReportList = async () => {
    try {
        const params = {
            order: "createTime",
            page: 1,
            size: 20,
            sort: "desc",
            studentId: props.studentId,
			is_deleted: 0,
        };
        const res = await service.student.studentProfile.page(params);
        console.log('获取的报告列表:', res); // 添加日志输出，查看返回的数据结构和内容
        if (res && res.list) {
            reportList.value = res.list;
            console.log('获取报告列表成功:', reportList.value); // 添加日志输出
        } else {
            console.log('获取的报告列表为空:', res);
        }
    } catch (error) {
        console.error('获取报告列表失败:', error);
        ElMessage.error('获取报告列表失败');
    }
};

// 提交报告
const submitReport = async () => {
    if (!reportForm.picUrl) {
        ElMessage.warning('请上传图片');
        return;
    }

    try {
        await service.student.studentProfile.add({
            picUrl: reportForm.picUrl,
            studentId: reportForm.studentId,
            remark: reportForm.remark
        });
        ElMessage.success('报告添加成功');
        getReportList();
        showAddReportDialog.value = false;
    } catch (error) {
        ElMessage.error('报告添加失败');
    }
};

// 删除报告
const deleteReport = async (id: number | string) => {
    try {
        await ElMessageBox.confirm(
            '确定要删除该报告吗？此操作不可撤销。',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        await service.student.studentProfile.reportSoftDelete({id: id})
        ElMessage.success('报告删除成功');
        getReportList();
    } catch (error) {
        if (error !== 'cancel') {
            console.error('删除报告失败:', error);
            ElMessage.error('删除报告失败');
        }
    }
};

onMounted(() => {
    console.log('showDialog');
    reportList.value = [];
    getReportList();
});
</script>

<style scoped>
.report-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 设置图片间距 */
}

.report-block {
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>